{% load i18n static %}

{% if result_hidden_fields %}
  <div class="hiddenfields">
    {% for item in result_hidden_fields %}{{ item }}{% endfor %}
  </div>
{% endif %}

<div class="ant-table-body">
  {% if results %}
    <table id="result_list">
      <thead class="ant-table-thead">
        <tr>
          {% for header in result_headers %}
            <th scope="col" {{ header.class_attrib }}>
               {% if header.sortable %}
                 {% if header.sort_priority > 0 %}
                   <div class="sortoptions">
                     <a class="sortremove" href="{{ header.url_remove }}" title="{% trans "Remove from sorting" %}"></a>
                     {% if num_sorted_fields > 1 %}<span class="sortpriority" title="{% blocktrans with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktrans %}">{{ header.sort_priority }}</span>{% endif %}
                     <a href="{{ header.url_toggle }}" class="toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% trans "Toggle sorting" %}"></a>
                   </div>
                 {% endif %}
               {% endif %}
               <div class="text">{% if header.sortable %}<a href="{{ header.url_primary }}">{{ header.text|capfirst }}</a>{% else %}<span>{{ header.text|capfirst }}</span>{% endif %}</div>
               <div class="clear"></div>
            </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody class="ant-table-tbody">
        {% for result in results %}
          {% if result.form and result.form.non_field_errors %}
            <tr class="ant-table-row ant-table-row-level-0"><td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td></tr>
          {% endif %}
          <tr class="ant-table-row ant-table-row-level-0">{% for item in result %}{{ item }}{% endfor %}</tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <a-alert type="info" :show-icon="true" >
      <p slot="message">{% trans 'No Result Found' %}</p>
      <div slot="description">
        <p>{% trans 'Please check your search & filter conditions' %}</p>
        <p><a href="">{% trans 'Reset' %}</a></p>
      </div>
    </a-alert>
  {% endif %}
</div>

<a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
<a-modal
  title="Title"
  :visible="visible"
  @ok="handleOk"
  :confirmLoading="confirmLoading"
  @cancel="handleCancel"
>
  <p>{{ModalText}}</p>
</a-modal>
<script type="application/javascript">
  window.data = {
      ...window.data,
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
  };
  window.mixins.methods = {
    ...window.mixins.methods,
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false
    }
  };
</script>